Creating custom callouts in SharePoint 2013 pages

 Just invoke the below function to generate a custom callout and attach it to a element in the page

Code:

function generateCallOut(element){

var CalloutContent = "<br/><img src='" + element.href + "' />";
var title = "QR Code - Preview";
var id = element.id;

SP.SOD.executeFunc("callout.js", "Callout", function () {
AddCalloutTip(id, CalloutContent , title);
});

}

function AddCalloutTip(id, tip, title){

// get the launchpoint element of the callout
var launchpoint = document.getElementById(id);

// configure Callout options
var calloutOptions = new CalloutOptions();
calloutOptions.ID = id;
calloutOptions.launchPoint = launchpoint;
calloutOptions.beakOrientation = 'leftRight';
calloutOptions.content = tip;
calloutOptions.title = title;
calloutOptions.openOptions = {event: "hover"};

// call the CalloutManager to create the callout
var callout = CalloutManager.createNew(calloutOptions);
}

Invoking function :

var element = document.getElementById("demo");
generateCallOut(element);

Result :